Vue.component('pane', {
    name: 'pane',
    template: '<div class="pane" v-show="show">' +
        '<slot></slot>' +
        '</div>',
    data: function () {
        return {
            show: true // 控制标签内容页的显示和隐藏
        }
    },
    props: {
        // pane的唯一标志,用户自行设置
        name: {
            type: String
        },
        // 显示在tabs组件的标签页标题中
        label: {
            type: String,
            default: ''
        }


    },
    methods: {
        updateNav() {
            // 访问父组件(tabs),调用tabs中的方法来更新标题
            this.$parent.updateNav();
        }
    },
    watch: {
        label() {
            this.updateNav();
        }
    },
    // pane 初始化时
    mounted() {
        this.updateNav();
    }
})
